<!-- 发文（函）流转过程-->
<template>
	<view>
		<view class="padding-bottom">
			<van-cell class="color-blue" icon="sort" :title="dataList.docProcess.title"  title-class="text-bold"/>
      <view class="process-container"  v-for="(item,index) in dataList.docProcess.data">
        <view class="process-left">
          <view>
            <image class="user-avatar" src="@/static/imgs/icon/icon-avatar.png"></image>
          </view>
          <view class="user-name">
            {{item.userName}}
          </view>
        </view>
        <view class="process-middle">
          <view class="text-black margin-bottom-sm">
            <view class="text-sm" v-text="'阅读时间：'+formatData(item.acceptTime)"></view>
          </view>
          <view class="text-black">
            <view class="text-sm" v-text="'处理时间：'+formatData(item.completeTime)"></view>
          </view>
        </view>
        <view class="process-right">
          <view class="text-xs color-blue"><i class="iconfont icon-dian color-blue" v-if="item.operation != null"/>{{item.operation}}</view>
        </view>
      </view>
		</view>
		 <view class="padding-bottom" v-if="dataList.signProcess != undefined && dataList.signProcess.length > 0 ">
			<van-cell class="color-blue" icon="newspaper-o" :title="dataList.signProcess[0].name" title-class="text-bold"/>
			<view>
				<van-row justify="center">
				  <van-col span="6"><van-cell title="接收单位" title-class="text-bold"></van-cell></van-col>
				  <van-col span="6"><van-cell title="当前环节" title-class="text-bold"></van-cell></van-col>
				  <van-col span="6"><van-cell title="当前状态" title-class="text-bold"></van-cell></van-col>
				  <van-col span="6"><van-cell title="发起人" title-class="text-bold"></van-cell></van-col>
				</van-row>
				<!-- signProcess: {"code":200,"data":[{"data":[{"index":1,"userName":"李攀","userId":"3961","curUserName":null,"deptId":"002001005","deptName":"办公室","actDefName":"处室秘书","actDefId":"hb_hq_csms","state":"会签结束","acceptTime":"2021-11-03 17:11:02","completeTime":"2021-11-03 17:43:53","useTime":"0天0小时33分","remark":null,"proInstId":"156704c024ef4198a5c7d1176d4a8b9f","subProInstId":"537510da17c54265aa4542450df45449","parentActDefName":"处室会签","isFinishState":null,"sendUserId":"8419","sendUserName":"尹成伟","readTime":"2021-11-03 17:16:30","operation":"拟办意见，结束会签"}],"name":"处室会签"}],"message":null} -->
        <van-row justify="center" v-for="item in dataList.signProcess[0].data">
          <van-col span="6"><van-cell :title="item.deptName" @click='getListProInstIdOperationLogs(item.subProInstId)' title-class="text-blue"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.userName"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.state"></van-cell></van-col>
          <van-col span="6"><van-cell :title="item.sendUserName"></van-cell></van-col>
        </van-row>
				<!-- popup 子会签流程 -->
				<van-popup v-model:show="showSubSignList" closeable round position="bottom" :style="{height: '80%' }"
					@click-close-icon="toClose" @click-overlay="toClose" get-container="body">
					<van-row >
						<van-col span="22">
							<van-cell :value="subSignData.title" />
						</van-col>
					</van-row>
					<view class="cu-list menu-avatar">
						<view class="process-container" v-for="(item,index) in subSignData.data">
                <view class="process-left">
                  <view>
                    <image class="user-avatar" src="@/static/imgs/icon/icon-avatar.png"></image>
                  </view>
                  <view class="user-name">
                    {{item.userName}}
                  </view>
                </view>
                <view class="process-middle">
                  <view class="text-black margin-bottom-sm">
                    <view class="text-sm" v-text="'阅读时间：'+formatData(item.readTime)"></view>
                  </view>
                  <view class="text-black">
                    <view class="text-sm" v-text="'处理时间：'+formatData(item.completeTime)"></view>
                  </view>
                </view>
                <view class="process-right">
                  <view class="text-xs color-blue"><i class="iconfont icon-dian color-blue" v-if="item.operation != null"/>{{item.operation}}</view>
                </view>
						</view>
					</view>
					<!-- </van-row> -->
				</van-popup>
			</view>

		</view>


		<!-- <view class="padding-bottom">
			<van-cell icon="friends-o" title="传阅人员" title-class="text-bold"/>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="item in personList">
					<view class="cu-avatar round lg" style="font-size:30rpx;url();">
						{{item.name}}
					</view>
					<view class="content padding-left">
						<view class="text-black">
							<view class="text" v-text="item.unit"></view>
						</view>
						<view class="text-black">
							<view class="text" v-text="item.dept"></view>
						</view>
						</viw>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			dataList:Object  //流转过程

		},
		data() {
			return {
				showSubSignList:false,//显示会签件子流程
				subSignData:{},//字会签件数据
				border: false,
				processList: []
			};
		},
		watch: {},
		methods: {
			//日期格式化，如果为null则用--代替
			formatData(data){
				if(data == null){
					return '--'
				}else{
					return data
				}
			},

			toClose() {
				this.showSubSignList  = false
			},
			//获取流转过程
			getListProInstIdOperationLogs(subProInstId){
				this.showSubSignList = true
				var _this = this
				this.$httploading({/// /caac/oa/mhjcomponent/processtrack/flowController/listoperationlogs
				  url: this.$http.adornUrl(`/caac/oa/component/workflow/workflowController/listProInstIdOperationLogs`),
				  method: 'post',
				   params: this.$http.adornParams({
					  'proInstId': subProInstId,
					  'systemKey': this.cache.get('userInfo').systemKey,//固定值
					  'systemFlag': this.cache.get('userInfo').systemFlag//固定值
				  })
				}).then(({data}) => {
					if(data.code==200){
						this.subSignData = data.data
					}

				})
			},
		},
	};
</script>

<style>
  .color-blue{
    color: #0081ff;
  }
  .process-container{
    display: flex;
    flex-direction: row;
    margin: 20rpx 15rpx;
    background-color: #FFFFFF;
    border-radius: 15rpx;
    border: 1rpx solid #f2f3f5;
    align-items: center;
  }
  .process-left{
    display: flex;
    flex-direction: column;
    flex: 2;
    padding: 14rpx;
    border-right: 1rpx solid #f2f3f5;
    justify-content: center;
    align-items: center;

  }
  .user-name{
    padding: 8rpx;
    color: #333333;
    font-size: 20rpx;
  }
  .user-avatar{
    width: 80rpx;
    height: 80rpx;
  }

  .process-middle{
    flex: 6;
    display: flex;
    padding-left: 20rpx;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .process-right{
    flex: 3;
    display: flex;
    padding: 15rpx 10rpx;
    justify-content: flex-end;
    align-items: center;
  }
</style>
